<template>
  <HelloWorld :value='selectorValue' @change="changeOption" />
 
  <!-- <HelloWorld :value='selectorValue' @change-option='changeOption'/> -->
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
/**1
 * 如何利用在组件商传递attribute，让子组件能够获取并使用他们
 * 非props的attribute
 * 
 * 单个的根元素
 *  使用组件时传递的所有属性，都会增加在根元素上
 * attribute继承
 * 
 * attribute继承禁用
 *    inheritAttrs: false，然后在需要使用的元素上v-bind绑定
 * fallthrough穿透
 */
export default {

  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      selectorValue: '2',
    };
  },
  methods: {
    changeOption(value) {
      console.log(value);
    },
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
